---
title: 링크
image: /images/user-guide/what-is-twenty/20.png
---

<Frame>
  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
</Frame>

## 연락 링크

연락처 정보를 표시하기 위한 스타일화된 링크 구성 요소입니다.

<Tabs>
<Tab title="Usage">

```jsx
import { BrowserRouter as Router } from 'react-router-dom';

import { ContactLink } from 'twenty-ui/navigation';

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log('Contact link clicked!', event);
  };

  return (
    <Router>
      <ContactLink
        className
        href="mailto:example@example.com"
        onClick={handleLinkClick}
      >
        example@example.com
      </ContactLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| 프로퍼티     | 유형                | 설명                    |
| -------- | ----------------- | --------------------- |
| 클래스 네임   | 문자열               | 추가 스타일링을 위한 선택적 이름    |
| href     | 문자열               | 링크의 대상 URL 또는 경로      |
| 클릭 시     | function          | 링크가 클릭될 때 트리거되는 콜백 함수 |
| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠        |

</Tab>

</Tabs>

## 원시 링크

링크를 표시하기 위한 스타일화된 링크 구성 요소입니다.

<Tabs>
<Tab title="Usage">

```jsx
import { RawLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RawLink className href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RawLink>
    </Router>
  );
};

```

</Tab>
<Tab title="Props">

| 프로퍼티     | 유형                | 설명                    |
| -------- | ----------------- | --------------------- |
| 클래스 네임   | 문자열               | 추가 스타일을 위한 선택적 이름     |
| href     | 문자열               | 링크의 대상 URL 또는 경로      |
| onClick  | function          | 링크가 클릭될 때 트리거되는 콜백 함수 |
| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠        |

</Tab>
</Tabs>

## 둥근 링크

Chip 구성 요소가 있는 라운드 스타일 링크입니다.

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RoundedLink href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RoundedLink>
    </Router>
  );
};
```

</Tab>

<Tab title="Props">

| 프로퍼티     | 유형                | 설명                    |
| -------- | ----------------- | --------------------- |
| href     | 문자열               | 링크의 대상 URL 또는 경로      |
| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠        |
| onClick  | function          | 링크가 클릭될 때 트리거되는 콜백 함수 |

</Tab>
</Tabs>

## 소셜 링크

URL, LinkedIn 및 X(또는 Twitter)와 같은 다양한 소셜 링크 유형을 지원하는 스타일화된 소셜 링크입니다.

<Tabs>
<Tab title="Usage">

```jsx
import { SocialLink } from "twenty-ui/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  return (
    <Router>
      <SocialLink
        type="twitter"
        href="https://twitter.com/twentycrm"
      ></SocialLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| 프로퍼티     | 유형                | 설명                                                                                      |
| -------- | ----------------- | --------------------------------------------------------------------------------------- |
| href     | 문자열               | 링크의 대상 URL 또는 경로                                                                        |
| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠                                                                          |
| 유형       | 문자열               | 소셜 링크 유형입니다. 옵션은 다음과 같습니다: `url`, `LinkedIn`, `Twitter` |
| 클릭 시     | function          | 링크가 클릭될 때 트리거되는 콜백 함수                                                                   |

</Tab>
</Tabs>
